<template>
   <!-- 加载图标样式20 -->
   <div class="loading">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
   </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   animation: animationContainer 1s ease infinite;
   height: 42px;
   position: relative;
   width: 42px
}

.shape {
   border-radius: 50%;
   height: 10px;
   position: absolute;
   width: 10px
}

.shape-1 {
   animation: animationShape1 .5s ease infinite alternate;
   background-color: #1678ff;
   left: 0
}

.shape-2 {
   animation: animationShape2 .5s ease infinite alternate;
   background-color: #ea4e3d;
   right: 0
}

.shape-3 {
   animation: animationShape3 .5s ease infinite alternate;
   background-color: #04be02;
   bottom: 0
}

.shape-4 {
   animation: animationShape4 .5s ease infinite alternate;
   background-color: #ffaa09;
   bottom: 0;
   right: 0
}

@keyframes animationContainer {
   0% {
      transform: rotate(0)
   }

   to {
      transform: rotate(1turn)
   }
}

@keyframes animationShape1 {
   0% {
      transform: translate(0)
   }

   to {
      transform: translate(20px, 20px)
   }
}

@keyframes animationShape2 {
   0% {
      transform: translate(0)
   }

   to {
      transform: translate(-20px, 20px)
   }
}

@keyframes animationShape3 {
   0% {
      transform: translate(0)
   }

   to {
      transform: translate(20px, -20px)
   }
}

@keyframes animationShape4 {
   0% {
      transform: translate(0)
   }

   to {
      transform: translate(-20px, -20px)
   }
}
</style>
